import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { connect } from 'react-redux'
import { UPDATE_IM } from 'src/store/actions/im'
import ChatPage from 'src/pageP/message/chat-page'
import { talentPostCard } from 'src/utils/RequestAPI'
import CustomButton from 'src/components/button/CustomButton'
import MessageJobCell from 'src/pageC/message/chat-page/components/MessageJobCell'
import NavigationUtil from 'src/utils/NavigationUtil'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import { DismissLoading } from 'src/utils/ToastUtil'
import CustomImage from 'src/components/image/CustomImage'

const mapActiontoProps = dispatch => ({
  updateImState (payload) {
    dispatch({
      type: UPDATE_IM,
      payload: {
        ...payload
      }
    })
  }
})

@connect(
  ({ userinfo, im, landmark }) => ({
    userinfo,
    landmark,
    ...im
  }),
  mapActiontoProps
)
class CChatPage extends ChatPage {
  constructor (props) {
    super(props)
    this.state = {
      ...this.state,
      jobItem: {}
    }
  }

  renderHeader () {
    const { cardShow } = this.state
    return (
      <View style={styles.container}>
        {this._returnCardView()}
        <CustomButton style={styles.bottomBtn} onPress={this._toggleCard}>
          <View style={styles.btnCenter}>
            <CustomImage
              style={styles.btnImg}
              source={cardShow ? require('src/imgC/message/card_hide_arrow.png') : require('src/imgC/message/card_show_arrow.png')}
            />
          </View>
        </CustomButton>
      </View>
    )
  }

  _returnCardView = () => {
    const { jobItem, cardShow } = this.state
    const { landmark } = this.props
    if (cardShow) {
      return <CustomButton style={styles.jobItemView} params={jobItem} onPress={this._messageJobCellClick}>
        {jobItem && jobItem.id && (<MessageJobCell
          item={jobItem} landmark={landmark} style={styles.messageJobCellView}
          tagViewStyle={styles.tagView} showJobType={true}/>)}
      </CustomButton>
    } else {
      return <CustomButton style={styles.cardContainer} onPress={this._toggleCard}>
        <Text style={styles.cardText}>{`${jobItem.name}(${jobItem.area})`}</Text>
      </CustomButton>
    }
  }

  _toggleCard = () => {
    const { cardShow } = this.state
    this.layoutAnimation()
    if (cardShow) {
      this.setState({
        cardShow: false
      })
    } else {
      this.setState({
        cardShow: true
      })
    }
  }

  _messageJobCellClick = (jobItem) => {
    const { id, state } = jobItem
    if (!id || state !== 0) return
    NavigationUtil.navigate('CJobdetail', {
      id: jobItem.id,
      showCommunicate: false
    })
  }

  activeSendMessage (status) {
    if (status) {
      const msg = '你好，我对这个职位很有兴趣，方便的话可以聊聊吗？'
      this.sendMsg(msg).then(() => {
        DismissLoading()
      })
    } else {
      DismissLoading()
    }
  }

  getUserId () {
    const { userinfo: { C: { userId } } } = this.props
    return userId
  }

  getSelToID () {
    const { selToID } = this.props
    return selToID
  }

  getName () {
    const { userinfo: { C: { userName } } } = this.props
    return userName
  }

  componentDidMount () {
    super.componentDidMount()
    const { landmark: { cityName } } = this.props
    talentPostCard({
      params: {
        cUserId: this.getUserId(),
        city: cityName,
        userId: parseInt(this.getSelToID())
      }
    }).then((data) => {
      console.info(data)
      this.setState({ jobItem: this._generateJobItem(data.data) })
    })
  }

  _generateJobItem = (jobItem) => {
    const { boss = {} } = jobItem
    // 0 兼职 1全职 2实习
    const item = {
      ...jobItem,
      area: jobItem.area,
      isFast: jobItem.isTop,
      basicInfoModel: {
        category: jobItem.category,
        name: jobItem.name,
        salary: jobItem.salary,
        settlementMethod: jobItem.settlementMethod,
        unit: jobItem.unit,
        type: jobItem.type
      },
      userAvator: boss.avator,
      gender: boss.gender,
      userName: boss.userName,
      postion: boss.position,
      type: jobItem.type,
      state: jobItem.state
    }
    return item
  }
}

export default CChatPage

const styles = StyleSheet.create({
  jobItemView: {
    backgroundColor: 'white'
  },
  messageJobCellView: {
    paddingTop: ScaleS(5),
    paddingBottom: ScaleS(5),
    paddingHorizontal: ScaleS(10)
  },
  tagView: {
    marginTop: ScaleS(5)
  },
  cardContainer: {
    width: '100%',
    height: ScaleS(30),
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center'
  },
  cardText: {
    color: '#666666',
    fontSize: ScaleT(11)
  },
  bottomBtn: {
    width: '100%',
    height: ScaleS(10),
    alignItems: 'center',
    justifyContent: 'center'
  },
  btnCenter: {
    width: ScaleS(30),
    height: ScaleS(10),
    alignItems: 'center',
    justifyContent: 'center'
  },
  btnImg: {
    width: ScaleS(30),
    height: ScaleS(10),
    resizeMode: 'cover'
  }
})
